<template>
  <view>
    <u-cell-group :border="false" :customStyle="{'background': '#fff'}">
      <u-cell title="微信小程序" size="large" :border="false" :isLink="true">
        <view slot="icon" class="iconfont icon-weixin menu-icon text-blue"></view>

        <view slot="value" class="">
          <button v-if="!typeList.includes('miniProgram')" type="default" open-type="getUserInfo"
            @getuserinfo="weChatLogin" class="wxLoginBtn">
            未绑定
          </button>
          <text v-else>已绑定</text>
        </view>
      </u-cell>

    </u-cell-group>
  </view>
</template>

<script>
  import {
    getMyBindAccount,
    miniLogin
  } from '@/api/login.js'

  export default {
    data() {
      return {
        oauthList: [],
        typeList: []
      }
    },
    onLoad() {
      this.getBindList()
    },
    methods: {
      getBindList() {
        getMyBindAccount().then((res) => {
          this.typeList = res.data.typeList
          this.oauthList = res.data.list
        })
      },
      weChatLogin(e) {
        if (e.detail) {
          uni.showLoading({
            title: "绑定中....",
            mask: true
          })
          var userInfo = e.detail.userInfo
          uni.login({
            provider: 'weixin',
            success: (loginRes) => {
              miniLogin({
                code: loginRes.code
              }).then(() => {
                this.$modal.closeLoading()
                this.$modal.msgSuccess("绑定成功")
              })
            }
          });
        } else {
          this.$modal.msgError("登录失败")
        }
      },
    }
  }
</script>

<style lang="scss">
  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }

  .wxLoginBtn {
    background: transparent !important;
    border: none;
    color: #ccc;
  }

  .wxLoginBtn::after {
    border: none;
  }
</style>
